<template>
	<view class="ma" :style="maStyle">
		<view @click="Jumpurl(item)" class="inputA" :style="posStyle">
			<text class="icon iconfont el-sc-search" :style="iconStyle"></text>
			<view class="input" :style="inputStyle">{{ mydata.placeholder }}</view>
		</view>
	</view>
</template>

<script>
	import base from '@/common/baseUrl.js'
export default {
	data() {
		return {
			item: {
				link: '../list/searchindex',
				type: 1
			}
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		posStyle() {
			return 'margin:' + this.mydata.margin.top + 'rpx 0 ' + this.mydata.margin.bottom + 'rpx;padding:0 ' + this.mydata.padding.lr + 'rpx 0;';
		},
		iconStyle() {
			return 'color:' + this.mydata.color.icon + ';left:' + (20 + this.mydata.padding.lr) + 'rpx';
		},
		inputStyle() {
			return (
				'border-radius:' +
				this.mydata.radius +
				'rpx;border:1rpx solid ' +
				this.mydata.color.border +
				';background-color:' +
				this.mydata.color.bg +
				';color:' +
				this.mydata.color.text +
				';'
			);
		},
		maStyle(){
        var bg = '';
        if (this.mydata.bg_type == 1) {
          bg = 'background:' + this.mydata.bg_color;
        } else if (this.mydata.bg_type == 2) {
          bg = 'background:url(' + base.baseUrl+'/'+ this.mydata.bg_img + ');background-size: contain;';
        }
        return bg
      },
		
	},
	methods: {}
};
</script>

<style lang="scss">
.ma {
	width: 100%;
	overflow: hidden;
}

.inputA {
	width: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	.icon {
		position: absolute;
		z-index: 2;
		top: 20rpx;
		//left: 6px;
		width: 48rpx;
		height: 48rpx;
	}

	.input {
		font-size: 28rpx;
		width: 100%;
		//border:1px solid #666;
		//border-radius: 3px;
		//color:#909399;
		height: 72rpx;
		line-height: 72rpx;
		box-sizing: border-box;
		padding-left: 72rpx;

		// box-shadow:0 0 0 60px #eee inset;
		//background: #fff;

		&:focus {
			outline: none;
		}
	}
}
</style>
